Plan Evolution
This template shows a chart based on the user’s answers in previous steps.
| Key | Notes |
|---|---|
type | planEvolution |
stepId | Unique step id |
title | The title of the template |
startValue | Accepts a jexl string to get the user’s answer: user.getOnboardingAnswer('body_measurements_current_weight') |
goalValue | Accepts a jexl string to get the user’s answer: user.getOnboardingAnswer('body_measurements_goal_weight') |
unit | Supports showing the unit used in the step. It could be % or kg for example. NOTE: don’t add unit when the chart is used for goalWeight onboarding. Because the unit is determined based on the user’s choice of the previous steps it’s handled in the code to be kg or lbs in that case. unit: "%" is valid to show % as the unit. unit: "" omits the unit for the step. "unit: "kg" not valid. |
backgroundColor | The background color of the step |
textColor | The text color of the step |
subtitleColor | The subtitle text color |
ctaText | The CTA text |
ctaTextColor | The CTA text color |
ctaBackgroundColor | The CTA background color |
bottomViewColor | The CTA button wrapper background color |
bottomViewBoxShadow | A shadow value that can be used if needed |
useHTML | Support using HTML for the title or subtitle in the step. |
chart | Check below for the chart table |
featuresList | The feature list below the chart: "featuresList": { "title": "AND", "textColor": "#7A90A3", "items": [ { "imageUrl": "https://c.thefab.co/web-onboarding/shape/plan-evolution/img_shape_plan_evolution_onboarding_icon_1.png", "title": "Watch your energy skyrocket!", "subtitle": "Boost your overall health and well-being.", "textColor": "#14191D", "subtitleColor": "#7A90A3" }, { "imageUrl": "https://c.thefab.co/web-onboarding/shape/plan-evolution/img_shape_plan_evolution_onboarding_icon_2.png", "title": "Live a better life", "subtitle": "with healthy and satisfying food choices.", "textColor": "#14191D", "subtitleColor": "#7A90A3" } ] } ![]() |
textWithBackgroundColor | The text is in the box in the screenshot below. "textWithBackgroundColor": { "title": "Change for good", "subtitle": "Goal achieved? It's just the beginning! Discover more simple ways to strengthen the healthy habits that keep you thriving.", "backgroundColor": "#F1F5FF", "titleColor": "#000F96", "subtitleColor": "#3847CC" } ![]() |
footerText | Used to add the paragraphs at the bottom of the step: "footerText": { "textColor": "#7A90A3", "paragraphs": [ "<strong><span style='color:#14191D'>Great news!</span></strong> Your choices in Shape will prevent chronic disease, strengthen your immune system, and improve your mental performance." ] } ![]() |
countdownDaysNumber | Used for a countdown jump by day – set it to 20 to jump down to 20 days in the subtitle with a countdown. Read the subtitle with a countdown below for more details. |
countdownDayDuration | The time in milliseconds each jump by countdownDaysNumber should take – set to 500 to count down by 20 days every 500ms |
[!IMPORTANT]
Supported placeholders
The
titleandsubtitlesupport a few placeholders to show the user the data needed. These placeholders are:
- {{GOAL_VALUE}}: is the
goalValuefor the chart – it’s based on the calculated jexlgoalValuein the step.- {{VALUE_BY_MIDDLE_POINT}}: the difference between the start and middle point values. Example: If the user answers that the start value is 50% and the goal value is 80% and we have a middle point (the special occasion like a vacation):
Your sleep schedule will improve {{VALUE_BY_MIDDLE_POINT}} by the vacation.- {{ANSWER|occasion}}: the user’s answer for the step with the id
occasion.An example of a
subtitleusing these placeholders:"subtitle": "<strong><span style='color: #6455FE'>{'{{'}GOAL_VALUE{'}}'}</span></strong> by {'{{'}TODAY|month|+6{'}}'} and <strong><span style='color: #FFA01C'>lose {'{{'}VALUE_BY_MIDDLE_POINT{'}}'}</span></strong> by the {'{{'}ANSWER|occasion{'}}'}",
[!NOTE] NOTE: If the chart doesn’t support
middlePointDate, we shouldn't use the {{VALUE_BY_MIDDLE_POINT}}
[!IMPORTANT]
Subtitle with a countdown
The step supports a countdown date to the subtitle. To count down to the date placeholder {{TODAY|month|+6}} in the example above, using the keys
countdownDaysNumberandcountdownDayDuration.For the code to recognize the countdown, you must wrap your date placeholder with a
spanthat has the class namecount-down:<span class='count-down'>{'{{'}TODAY|month|+6{'}}'}</span>"subtitle": "<strong><span style='color: #6455FE'>{'{{'}GOAL_VALUE{'}}'}</span></strong> by <span class='count-down'>{'{{'}TODAY|month|+4{'}}'}</span>, and <strong><span style='color: #6455FE'>increase {'{{'}VALUE_BY_MIDDLE_POINT{'}}'}</span></strong> by your <br><strong><span style='color: #FFA01C'>{'{{'}ANSWER|occasion{'}}'}</span></strong>",
Chart
| Key | Notes |
|---|---|
options | Some options to be passed change the chart: "options": { "span": 0.5, "band": 0.8, "degree": 1, "variation": 7.5, "extremes": 6 } span: number band: number, // 0 to 1, default 0 degree: [0, 1, 2] variation: set it to 0 for a linear chart extremes: the number of the peak points in the chart |
dotColor | The color of the last dot on the line chart |
dotBorderColor | The dotColor border color |
goalValueLabelColor | The text color of the goalValue |
goalValueText | The label text on the line in the cart (Goal in the screenshot below) |
gridColor | The color of the grid line |
lineColor | The line chart color (if it’s a solid color not gradient) |
goalValueLineColor | The dashed-line color in the chart. |
lineGradient | The gradient of the line chart. It’s passed like this: "lineGradient": { "from": "#B899FF", "to": "#7F6BFE" }, |
middlePointDate | A jext value to get the date of a special event/occasion for the user. "user.getOnboardingAnswer('occasion_when')", |
middlePointColor | The background color of the middle point. |
middlePointBorderColor | The border color of the middle point. |
middlePointLabel | The label should show on the middle point. If it’s based on the user’s answer from a previous step, it should be like this `"{{ANSWER |
lineMethod | planEvolution accepts an optional lineMethod to control the shape of the created curve: static: we can set lineMethod to static if we want to keep the curve the same wavy shape for all users (it’s predictable) loess: uses loess algorithms to determine the shape of the curve – it will change based on the user’s answers to startValue and goalValue questions. |
[!IMPORTANT] NOTE: The
middlePointDateshould be based on the user’s answer on the [Question Date Picker](Question Date Picker) step. However, the onboarding has the option to omit that point if the user answers that they don’t have any events, we should handle the onboarding using [Supported Logic](../Supported Logic) to jump the user to a different step – check out the JSON file below for an example.

JSON file example
{
"id": "shape_app_id",
"journeyId": "6Gr4B9SkA3",
"bold": true,
"appId": "co.thefab.shape",
"language": "en",
"seo": {
"title": "Shape",
"favicon": "https://c.thefab.co/web-onboarding/shape/shape-favicon.png",
"description": "The company that created Shape was incubated at Duke University at the Center for Advanced Hindsight. The approach is not one of self-discipline, it is one of awareness."
},
"steps": [
{
"type": "bodyMeasurementsWeb",
"stepId": "body_measurements_current_weight",
"currentWeightKey": "current_weight",
"backgroundColor": "#ECEAFF",
"textColor": "#251C93",
"ctaText": "Continue",
"ctaColor": "#FFF",
"ctaBackgroundColor": "#251C93",
"ctaHoverBackgroundColor": "#3425B8",
"title": "Your current weight",
"inputPlaceholderColor": "#BBB4FF",
"inputTextColor": "#251C93",
"tabs": {
"kg": [
{
"placeholder": "Current weight",
"inputSuffix": "kg",
"toggleKey": "kg",
"isMetricSystem": true
}
],
"lbs": [
{
"placeholder": "Current weight",
"inputSuffix": "lbs",
"toggleKey": "lbs",
"isMetricSystem": false
}
]
},
"toggle": {
"activeTextColor": "#251C93",
"activeBackgroundColor": "#FFF",
"backgroundColor": "#251C93",
"textColor": "#fff",
"metric": "kg",
"imperial": "lbs"
}
},
{
"type": "bodyMeasurementsWeb",
"stepId": "body_measurements_goal_weight",
"currentWeightKey": "goal_weight",
"backgroundColor": "#ECEAFF",
"textColor": "#251C93",
"ctaText": "Continue",
"ctaColor": "#FFF",
"ctaBackgroundColor": "#251C93",
"ctaHoverBackgroundColor": "#3425B8",
"title": "Your goal weight",
"inputPlaceholderColor": "#BBB4FF",
"inputTextColor": "#251C93",
"errorMessage": "Your goal weight is higher than your current weight. Please make sure to enter these correctly.",
"tabs": {
"kg": [
{
"placeholder": "Goal weight",
"inputSuffix": "kg",
"toggleKey": "kg",
"isMetricSystem": true
}
],
"lbs": [
{
"placeholder": "Goal weight",
"inputSuffix": "lbs",
"toggleKey": "lbs",
"isMetricSystem": false
}
]
},
"toggle": {
"activeTextColor": "#251C93",
"activeBackgroundColor": "#FFF",
"metric": "kg",
"imperial": "lbs",
"backgroundColor": "#251C93",
"textColor": "#fff"
}
},
{
"type": "goalChoice",
"title": "Having something to look forward to can be a big motivator to stick to your plan.",
"stepId": "occasion",
"subtitle": "Do you have an important event coming up?",
"key": "occasion",
"backgroundColor": "#ECEAFF",
"textColor": "#251C93",
"subtitleTextColor": "#3425B8",
"choices": [
{
"name": "Vacation",
"value": "vacation",
"nameColor": "#3425B8",
"backgroundColor": "#f5f7ff",
"hoverBackgroundColor": "#F6F5FF"
},
{
"name": "Wedding",
"value": "wedding",
"nameColor": "#3425B8",
"backgroundColor": "#f5f7ff",
"hoverBackgroundColor": "#F6F5FF"
},
{
"name": "Birthday",
"value": "birthday",
"nameColor": "#3425B8",
"backgroundColor": "#f5f7ff",
"hoverBackgroundColor": "#F6F5FF"
},
{
"name": "Important event",
"value": "event",
"nameColor": "#3425B8",
"backgroundColor": "#f5f7ff",
"hoverBackgroundColor": "#F6F5FF"
},
{
"name": "No, I don't have an event",
"value": "no_event",
"nameColor": "#3425B8",
"backgroundColor": "#f5f7ff",
"hoverBackgroundColor": "#F6F5FF"
}
]
},
{
"type": "questionDatePicker",
"title": "Exciting! We'll keep your event in mind as we create your plan.",
"stepId": "occasion_when",
"subtitle": "When is your {{ANSWER|occasion}}?",
"key": "occasion_when",
"ctaText": "Continue",
"ctaTextColor": "#FFF",
"ctaBackgroundColor": "#251C93",
"label": "Pick a date",
"iconColor": "#6455FE",
"inputTextColor": "#2F0191",
"inputBackgroundColor": "#f5f7ff",
"labelTextColor": "#6455FE",
"defaultDateOffsetDays": 90,
"backgroundColor": "#ECEAFF",
"textColor": "#251C93",
"subtitleTextColor": "#3425B8",
"minDateOffsetDays": 80,
"inputBackgroundHoverColor": "#f5f7ff"
},
{
"type": "planEvolution",
"stepId": "evolution_6_months",
"title": "We predict you'll be",
"subtitle": "<strong><span style='color: #6455FE'>{{GOAL_VALUE}}</span></strong> by {{TODAY|month|+6}} and <strong><span style='color: #FFA01C'>lose {{VALUE_BY_MIDDLE_POINT}}</span></strong> by the {{ANSWER|occasion}}",
"startValue": "user.getOnboardingAnswer('body_measurements_current_weight')",
"goalValue": "user.getOnboardingAnswer('body_measurements_goal_weight')",
"backgroundColor": "#FFF",
"textColor": "#14191D",
"subtitleColor": "#7A90A3",
"useHTML": true,
"ctaText": "Continue",
"ctaTextColor": "#FFF",
"ctaBackgroundColor": "#251C93",
"bottomViewColor": "#FFF",
"bottomViewBoxShadow": "-1px 0px 8px 2px rgba(74,74,74,0.05)",
"chart": {
"trendDirection": "down",
"dotBorderColor": "white",
"dotColor": "#6455FE",
"gridColor": "#D8DCFF",
"goalValueLabelColor": "white",
"axisTextColor": "#A298FF",
"goalValueText": "Goal",
"middlePointLabel": "{{ANSWER|occasion}}",
"goalValueLineColor": "#FF9945",
"monthsCount": 6,
"middlePointDate": "user.getOnboardingAnswer('occasion_when')",
"middlePointColor": "#FF9945",
"middlePointBorderColor": "#FFF",
"lineGradient": {
"from": "#B899FF",
"to": "#7F6BFE"
},
"options": {
"span": 0.5,
"band": 0.8,
"degree": 2,
"variation": 4,
"extremes": 4
}
},
"textWithBackgroundColor": {
"title": "Change for good",
"subtitle": "Goal achieved? It's just the beginning! Discover more simple ways to strengthen the healthy habits that keep you thriving.",
"backgroundColor": "#F1F5FF",
"titleColor": "#000F96",
"subtitleColor": "#3847CC"
},
"featuresList": {
"title": "AND",
"textColor": "#7A90A3",
"items": [
{
"imageUrl": "https://c.thefab.co/web-onboarding/shape/plan-evolution/img_shape_plan_evolution_onboarding_icon_1.png",
"title": "Watch your energy skyrocket!",
"subtitle": "Boost your overall health and well-being.",
"textColor": "#14191D",
"subtitleColor": "#7A90A3"
},
{
"imageUrl": "https://c.thefab.co/web-onboarding/shape/plan-evolution/img_shape_plan_evolution_onboarding_icon_2.png",
"title": "Live a better life",
"subtitle": "with healthy and satisfying food choices.",
"textColor": "#14191D",
"subtitleColor": "#7A90A3"
}
]
},
"footerText": {
"textColor": "#7A90A3",
"paragraphs": [
"<strong><span style='color:#14191D'>Great news!</span></strong> Your choices in Shape will prevent chronic disease, strengthen your immune system, and improve your mental performance."
]
}
},
{
"type": "planEvolution",
"stepId": "evolution_4_months",
"trendDirection": "down",
"title": "We predict you'll be",
"subtitle": "<strong><span style='color: #6455FE'>{{GOAL_VALUE}}</span></strong> by {{TODAY|month|+4}} and <strong><span style='color: #FFA01C'>lose {{VALUE_BY_MIDDLE_POINT}}</span></strong> by the {{ANSWER|occasion}}",
"startValue": "user.getOnboardingAnswer('body_measurements_current_weight')",
"goalValue": "user.getOnboardingAnswer('body_measurements_goal_weight')",
"backgroundColor": "#FFF",
"textColor": "#14191D",
"subtitleColor": "#7A90A3",
"useHTML": true,
"ctaText": "Continue",
"ctaTextColor": "#FFF",
"ctaBackgroundColor": "#251C93",
"ctaHoverBackgroundColor": "#3425B8",
"bottomViewColor": "#FFF",
"bottomViewBoxShadow": "-1px 0px 8px 2px rgba(74,74,74,0.05)",
"chart": {
"middlePointDate": "user.getOnboardingAnswer('occasion_when')",
"middlePointColor": "#FF9945",
"middlePointBorderColor": "#FFF",
"trendDirection": "down",
"dotBorderColor": "white",
"dotColor": "#6455FE",
"gridColor": "#D8DCFF",
"goalValueLabelColor": "white",
"axisTextColor": "#A298FF",
"goalValueText": "Goal",
"middlePointLabel": "{{ANSWER|occasion}}",
"goalValueLineColor": "#FF9945",
"monthsCount": 4,
"lineGradient": {
"from": "#B899FF",
"to": "#7F6BFE"
},
"options": {
"span": 0.5,
"band": 0.8,
"degree": 1,
"variation": 2,
"extremes": 3
}
},
"textWithBackgroundColor": {
"title": "Change for good",
"subtitle": "Goal achieved? It's just the beginning! Discover more simple ways to strengthen the healthy habits that keep you thriving.",
"backgroundColor": "#F1F5FF",
"titleColor": "#000F96",
"subtitleColor": "#3847CC"
},
"featuresList": {
"title": "AND",
"textColor": "#7A90A3",
"items": [
{
"imageUrl": "https://c.thefab.co/web-onboarding/shape/plan-evolution/img_shape_plan_evolution_onboarding_icon_1.png",
"title": "Watch your energy skyrocket!",
"subtitle": "Boost your overall health and well-being.",
"textColor": "#14191D",
"subtitleColor": "#7A90A3"
},
{
"imageUrl": "https://c.thefab.co/web-onboarding/shape/plan-evolution/img_shape_plan_evolution_onboarding_icon_2.png",
"title": "Live a better life",
"subtitle": "with healthy and satisfying food choices.",
"textColor": "#14191D",
"subtitleColor": "#7A90A3"
}
]
},
"footerText": {
"textColor": "#7A90A3",
"paragraphs": [
"<strong><span style='color:#14191D'>Great news!</span></strong> Your choices in Shape will prevent chronic disease, strengthen your immune system, and improve your mental performance."
]
}
},
{
"type": "planEvolution",
"stepId": "evolution_6_months_no_middle_point",
"title": "We predict you'll be",
"subtitle": "<strong><span style='color: #6455FE'>{{GOAL_VALUE}}</span></strong> by {{TODAY|month|+6}}.",
"startValue": "user.getOnboardingAnswer('body_measurements_current_weight')",
"goalValue": "user.getOnboardingAnswer('body_measurements_goal_weight')",
"backgroundColor": "#FFF",
"textColor": "#14191D",
"subtitleColor": "#7A90A3",
"useHTML": true,
"ctaText": "Continue",
"ctaTextColor": "#FFF",
"ctaBackgroundColor": "#251C93",
"ctaHoverBackgroundColor": "#3425B8",
"bottomViewColor": "#FFF",
"bottomViewBoxShadow": "-1px 0px 8px 2px rgba(74,74,74,0.05)",
"chart": {
"trendDirection": "down",
"dotBorderColor": "white",
"dotColor": "#6455FE",
"gridColor": "#D8DCFF",
"goalValueLabelColor": "white",
"axisTextColor": "#A298FF",
"goalValueText": "Goal",
"monthsCount": 6,
"goalValueLineColor": "#FF9945",
"lineGradient": {
"from": "#B899FF",
"to": "#7F6BFE"
},
"options": {
"span": 0.5,
"band": 0.8,
"degree": 1,
"variation": 5,
"extremes": 3
}
},
"textWithBackgroundColor": {
"title": "Change for good",
"subtitle": "Goal achieved? It's just the beginning! Discover more simple ways to strengthen the healthy habits that keep you thriving.",
"backgroundColor": "#F1F5FF",
"titleColor": "#000F96",
"subtitleColor": "#3847CC"
},
"featuresList": {
"title": "AND",
"textColor": "#7A90A3",
"items": [
{
"imageUrl": "https://c.thefab.co/web-onboarding/shape/plan-evolution/img_shape_plan_evolution_onboarding_icon_1.png",
"title": "Watch your energy skyrocket!",
"subtitle": "Boost your overall health and well-being.",
"textColor": "#14191D",
"subtitleColor": "#7A90A3"
},
{
"imageUrl": "https://c.thefab.co/web-onboarding/shape/plan-evolution/img_shape_plan_evolution_onboarding_icon_2.png",
"title": "Live a better life",
"subtitle": "with healthy and satisfying food choices.",
"textColor": "#14191D",
"subtitleColor": "#7A90A3"
}
]
},
"footerText": {
"textColor": "#7A90A3",
"paragraphs": [
"<strong><span style='color:#14191D'>Great news!</span></strong> Your choices in Shape will prevent chronic disease, strengthen your immune system, and improve your mental performance."
]
}
},
{
"type": "planEvolution",
"stepId": "evolution_4_months_no_middle_point",
"trendDirection": "down",
"title": "We predict you'll be",
"subtitle": "<strong><span style='color: #6455FE'>{{GOAL_VALUE}}</span></strong> by {{TODAY|month|+4}}",
"startValue": "user.getOnboardingAnswer('body_measurements_current_weight')",
"goalValue": "user.getOnboardingAnswer('body_measurements_goal_weight')",
"backgroundColor": "#FFF",
"textColor": "#14191D",
"subtitleColor": "#7A90A3",
"useHTML": true,
"ctaText": "Continue",
"ctaTextColor": "#FFF",
"ctaBackgroundColor": "#251C93",
"ctaHoverBackgroundColor": "#3425B8",
"bottomViewColor": "#FFF",
"bottomViewBoxShadow": "-1px 0px 8px 2px rgba(74,74,74,0.05)",
"chart": {
"trendDirection": "down",
"dotBorderColor": "white",
"dotColor": "#6455FE",
"gridColor": "#D8DCFF",
"goalValueLabelColor": "white",
"axisTextColor": "#A298FF",
"goalValueText": "Goal",
"goalValueLineColor": "#FF9945",
"monthsCount": 4,
"lineGradient": {
"from": "#B899FF",
"to": "#7F6BFE"
},
"options": {
"span": 0.5,
"band": 0.8,
"degree": 0,
"variation": 4,
"extremes": 3
}
},
"textWithBackgroundColor": {
"title": "Change for good",
"subtitle": "Goal achieved? It's just the beginning! Discover more simple ways to strengthen the healthy habits that keep you thriving.",
"backgroundColor": "#F1F5FF",
"titleColor": "#000F96",
"subtitleColor": "#3847CC"
},
"featuresList": {
"title": "AND",
"textColor": "#7A90A3",
"items": [
{
"imageUrl": "https://c.thefab.co/web-onboarding/shape/plan-evolution/img_shape_plan_evolution_onboarding_icon_1.png",
"title": "Watch your energy skyrocket!",
"subtitle": "Boost your overall health and well-being.",
"textColor": "#14191D",
"subtitleColor": "#7A90A3"
},
{
"imageUrl": "https://c.thefab.co/web-onboarding/shape/plan-evolution/img_shape_plan_evolution_onboarding_icon_2.png",
"title": "Live a better life",
"subtitle": "with healthy and satisfying food choices.",
"textColor": "#14191D",
"subtitleColor": "#7A90A3"
}
]
},
"footerText": {
"textColor": "#7A90A3",
"paragraphs": [
"<strong><span style='color:#14191D'>Great news!</span></strong> Your choices in Shape will prevent chronic disease, strengthen your immune system, and improve your mental performance."
]
}
},
{
"type": "webview",
"stepId": "last_step",
"backgroundColor": "#FFF",
"redirectTo": "https://shape.thefabulous.co/purchase/shape/checkout"
}
],
"logic": [
{
"stepId": "occasion",
"actions": [
{
"type": "jump",
"to": "evolution_6_months_no_middle_point",
"condition": "user.getOnboardingAnswerValue('occasion') == 'no_event'"
}
]
},
{
"stepId": "evolution_4_months",
"actions": [
{
"type": "jump",
"to": "last_step",
"condition": "true"
}
]
}
]
}



Read the subtitle with a countdown below for more details.